<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景相关属性</title>
    <style>
        div {
          width: 400px;
          height: 400px;
          font-size: 10px;
          /*背景颜色默认 transparent(透明的) */
          background-color: blueviolet;
          /* 背景的图片 */
          background-image: url("../images/悟空.jpg");
          /* 背景图片是否重复 no-repeat不重复 repeat-x在x轴上重复 repeat-y在y轴上重复 */
          background-repeat: no-repeat;
          /* 背景图片位置的第一种写法 水平 right center left 垂直:top center bottom  只写一个的话会自动分辨是哪个位置的 另一个的位置就是center */
          /*background-position: right center;*/
          /* 背景图片位置的第二种写法 第一个：从容器的左上角开始算 水平方向 水平向右(正方向) 垂直方向 垂直向下(正方向)  */
          background-position: 10px 20px;
          /* 复合属性:对顺序没有要求  */
          background: green url("../images/悟空.jpg") no-repeat 10px 20px;

        }
    </style>
</head>
<body>
    <div>你好啊!!</div>
</body>
</html>